<template>
  <div class="app-container subsidy-portal">
    <el-row class="title">
      <h1 style="font-size: 60px; color: rgba(0,248,255,1);">补贴类型</h1>
    </el-row>
    <div class="ellipse1"></div>
    <div class="ellipse2"></div>
    <div class="ellipse3"></div>
    <el-row class="cardCon">
      <el-col :span="6">
        <el-card class="subsidy-card" shadow="hover" @click.native="goToAgricultural"
        :class="{ 'disabled-card': isMachie }">
          <div class="card-content">
            <img src="../../assets/images/nongye-log.png" style="z-index: 3;" />
            <img src="../../assets/images/log-dizuo.png" />
            <h3>农业补贴 </h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="height: 100%;">
        <div class="qiu"></div>
      </el-col>
      <el-col :span="6">
        <el-card
          class="subsidy-card" shadow="hover"
          :class="{ 'disabled-card': !isMachie && !isAdmin}"
          @click.native="handleMachineryClick"
        >
          <div class="card-content">
            <img src="../../assets/images/nongji-log.png" style="z-index: 3;" />
            <img src="../../assets/images/log-dizuo.png" />
            <h3>农机购置与应用补贴</h3>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>
  
<script>
import { checkRole, checkPermi } from '@/utils/permission'
export default {
  name: 'Portal',
  computed: {
    isVillageRole() {
      // 只判断是否为 village 角色，admin 不算
      const roles = this.$store?.getters?.roles || [];
      return roles.includes('village');
    }
  },
  data() {
    return {
      isMachie: true,
      isAdmin :false,
    }
  },
  created() {
    console.log("目前登录的角色", this.$store.state.user.user.roles[0].roleKey)
    if( this.$store.state.user.user.roles[0].roleKey == 'admin'){
      // console.log("管理员登录")
      this.isAdmin = true;
    }
    // console.log("目前登录的角色是1111", this.$store.state.user.roles[0])

    if (!this.$store.state.user.user.roles[0].roleKey.endsWith('Nongji')) {  // 为村干部时
      this.isMachie = false
    }
    console.log("isMachie", this.isMachie)
  },
  methods: {
    goToAgricultural() {
      if (this.isMachie) { 
        this.$message({  message: '该用户没有操作权限!' });
      } else {
        
        this.$router.push('/index')
      }
    },
    handleMachineryClick() {
      if (this.isMachie || this.isAdmin) { 
        this.$router.push({ path: '/machinery/compliehandle' }) 
      } else {
        this.$message({  message: '该用户没有操作权限!' });
      }
    },
    checkRole, // 让模板可以访问 checkRole

  }
}
</script>
  
<style scoped>
/* 旋转效果 */
.qiu {
  /* 启用变换原点居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/images/portal-qiu.png");
  background-size: contain;
  /* 或者设置具体尺寸如 100px */
  background-position: center center;
  /* 将背景图定位在底部中间 */
  background-repeat: no-repeat;
  height: 20vw;


  /* 可选：如果你想看到旋转中心更明显 */
  transform-origin: center center;
  /* 动画定义 */
  animation: rotateClockwise 5s linear infinite;
}

/* 定义顺时针旋转动画 */
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.subsidy-portal {
  width: 100vw;
  height: 100vh;
  background-color: #1B3948;
  position: relative;
  overflow: hidden;
}

.title {
  width: 100vw;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: rgba(0, 248, 255, 1);
  background-image: url("../../assets/images/portal-header-bg.png");
  background-size: auto;
  /* 或者设置具体尺寸如 100px */
  background-position: center bottom;
  /* 将背景图定位在底部中间 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
}

.cardCon {
  width: 100vw;
  height: 70vh;
  margin-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/images/portal-qiu-bottom.png");
  /* background-color: #059eeb; */
  background-size: auto;
  /* 或者设置具体尺寸如 100px */
  background-position: center 30%;
  /* 将背景图定位在底部中间 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
  position: relative;
  z-index: 2;
}

.subsidy-card {
  cursor: pointer;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s;
  background-color: transparent;
  border: none;
  z-index: 1;
}

.disabled-card {
  cursor: not-allowed !important;
  opacity: 0.6;
}

.subsidy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 20px;
  font-size: 28px;
  color: rgba(117, 249, 253, 1);
  display: flex;
  flex-direction: column;
  /* 让子元素按上下顺序排列 */
  align-items: center;
  /* 居中对齐子元素 */
  text-align: center;
  /* 确保文本居中 */
}

.card-content img {
  margin-bottom: -15px;
  /* 调整此值以增加或减少图片之间的空间 */
}

.card-content h3 {
  margin-top: 40px;
  /* 如果需要，可调整标题与其他内容的空间 */
  height: 50px;
  line-height: 29px;
}

.card-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.ellipse1 {
  position: absolute;
  /* left: 446px;
  top: 432px;
  width: 1008px;
  height: 496px; */
  left: 24vw;
  /* 446/1920 */
  top: 40vh;
  /* 432/1080 */
  width: 52.5vw;
  /* 1008/1920 */
  height: 45.93vh;
  /* 496/1080 */

  line-height: 18px;
  background-color: rgba(255, 255, 255, 0);
  color: rgba(51, 51, 51, 1);
  font-size: 13px;
  text-align: center;
  font-family: -regular;
  border: 3px dashed rgba(0, 131, 157, 1);

  border-radius: 50%;
  z-index: 1;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -10%); */
  pointer-events: none;
  /* 防止椭圆干扰点击事件 */
}

.ellipse2 {
  position: absolute;
  /* left: 750px;
  top: 593px;
  width: 401px;
  height: 134px; */
  left: 40vw;
  /* 750/1920 */
  top: 54.91vh;
  /* 593/1080 */
  width: 20.89vw;
  /* 401/1920 */
  height: 12.41vh;
  /* 134/1080 */

  line-height: 18px;
  background-color: rgba(0, 58, 95, 1);
  color: rgba(51, 51, 51, 1);
  font-size: 13px;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(102, 255, 255, 0.35);
  font-family: -regular;
  border: 1px solid rgba(255, 255, 255, 1);
  /* background: rgba(18, 142, 190, 0.377); */

  border-radius: 50%;
  z-index: 1;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, 80%); */
  pointer-events: none;
  /* 防止椭圆干扰点击事件 */
}

.ellipse3 {
  position: absolute;
  /* left: 796px;
  top: 595px;
  width: 306px;
  height: 101px; */
  left: 43vw;
  /* 796/1920 */
  top: 55.09vh;
  /* 595/1080 */
  width: 15.94vw;
  /* 306/1920 */
  height: 9.35vh;
  /* 101/1080 */

  line-height: 18px;
  background-color: rgba(0, 81, 115, 1);
  color: rgba(51, 51, 51, 1);
  font-size: 13px;
  text-align: center;
  box-shadow: 5px 0px 10px 0px rgba(102, 255, 255, 0.35);
  font-family: -regular;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 1;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, 100%); */
  pointer-events: none;
  /* 防止椭圆干扰点击事件 */
}

.agricultural-icon {
  color: #67C23A;
}

.machinery-icon {
  color: #409EFF;
}

h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

p {
  color: #909399;
  font-size: 16px;
}
</style>